<script setup lang="ts">
import {reactive} from 'vue'
import { ElNotification } from 'element-plus';
import {useUserStore} from "@/store/modules/user";
import {useRouter} from "vue-router";
let userInfo = reactive({
  username: '',
  password: ''
})

const router = useRouter()
const Login = async ()=>{
  try {
    await useUserStore().doLogin(userInfo)
    router.push('/')
    ElNotification({
      message: '登录成功',
      type: 'success',
      duration: 2000,
      showClose: false,
    });
  } catch (err){
    ElNotification({
      message: '失败',
      type: 'error',
      duration: 2000,
      showClose: false,
    });
  }
}
</script>

<template>
  <div
      class="h-screen w-screen overflow-hidden bg-[url('https://s11.ax1x.com/2023/09/03/pPDQwjS.jpg')] bg-cover flex justify-center items-center">
    <div
        class=" w-1/4 h-1/4 backdrop-blur-lg rounded-xl p-5 flex flex-col justify-center items-center text-black">
      <el-form label-position="left">
        <el-form-item label="用户名:" label-width="auto">
          <el-input placeholder="请输入用户名" v-model="userInfo.username"></el-input>
        </el-form-item>
        <el-form-item label="密码:" label-width="auto">
          <el-input placeholder="请输入密码" v-model="userInfo.password" type="password" show-password></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="Login">Login</el-button>
    </div>
  </div>
</template>

<style scoped>
</style>